<script lang='ts' setup name='Hero'>  
 import { ref } from 'vue' 
 
//  defineProps(["name","force"]

    const {name,initForce } = defineProps<{
        name:string,
        initForce?:number
    }>()


    const force = ref(initForce?initForce:100)
   

    function fighting(parent:{onFightingHero:string[]}){

        console.log(parent)
        // console.log()

        parent.onFightingHero.push(name)
    }





    defineExpose({force})

</script>  
  
<template>  
    <div class="hero">

    武将：{{ name }} ,武力值:{{ force  }}
    

    <button @click="fighting($parent)">申请出战</button>



    </div>




</template>  
  
<style scoped> 
.hero{
    border-radius: 10px;
    background-color: antiquewhite;
    min-height: 130px;
    box-shadow: 0 0 10px black;
    margin: 20px;
    padding: 20px;
} 

</style>  